<template>
    <view class="content">
        <mine-head :title="title"></mine-head>
        <view class="item" v-for="(item,index) in indexList" :key="index" @click="goTo('/pages/comB/community/home?id=' + item.followUserId)" >
            <view class="pic fl" >
                <image :src="baseUrl + item.photo" mode=""></image>
            </view>
            <view class="btn fr" v-if="item.isFollow">已关注</view>
            <view class="btn fr" v-else @click.stop="guanzhu(item.createBy,index)">回关</view>
            <view class="text">
                <view class="name">{{item.nickName}}</view>
            </view>
        </view>
    </view>
</template>

<script>
    import config from '@/utils/config';
	export default {
		data() {
			return {
				page:1,
				baseUrl:config.host1,
                id:null,
                type:null,
                indexList:[],
                title:'关注列表'
			};
		},
        onShow() {
        	
        },
        onLoad(option) {
            if(option.type==2){
                this.title='粉丝列表'
            }
            this.type=Number(option.type)
            this.getList()
        },
        onReachBottom() {
            this.page=this.page+1
            this.getList()
        },
        methods:{
            goTo(url){
                uni.$_navFn('to',url)
            },
            guanzhu(id,index){
                let that = this;
                uni.$_get({
                	url: "add-guanzhu|"+'?id=' + id,
                	that: that,
                	success(res) {
                		if(res.code == 0){
                			that.indexList[index].isFollow=true
                		}
                	},
                    fail(err) {
                    	console.log(err)
                    }
                });
            },
            getList() {
            	let that = this;
                let p = {
                    pageNo:that.page,
                    pageSize:5
                }
                uni.$_post({
                    url: that.type==1?"follow-list":"fans-list",
                    that: that,
                    params: p,
                    success(res) {
                        if(res.code == 0){
                            var list=[]
                            that.indexList.forEach(item => {
                                list.push(item)
                            })
                            res.data.records.forEach(item => {
                                list.push(item)
                            })
                            that.indexList = list
                        }  
                    },
                    fail(err) {
                    	console.log(err)
                    }
                });
            },
        }
	}
</script>

<style lang="scss">
    .content{
        padding: 0 30rpx;
        .item{
            padding: 40rpx 0;
            border-bottom: 1rpx solid #e5e5e5;
            overflow: hidden;
            .pic{
                width: 78rpx;
                margin-right: 25rpx;
                border-radius: 100%;
                overflow: hidden;
                &::before{padding-top: 100%;}
            }
            .btn{
                width: 134rpx;
                height: 60rpx;
                line-height: 60rpx;
                text-align: center;
                border-radius: 30rpx;
                border: 1rpx solid #759dff;
                font-size: 26rpx;
                color: #759dff;
                margin-left: 25rpx;
                margin-top: 10rpx;
            }
            .text{
                overflow: hidden;
                padding-top: 20rpx;
                .name{
                    font-size: 30rpx;
                    font-weight: bold;
                    line-height: 32rpx;
                    color: #1e1e1e;
                    margin-bottom: 15rpx;
                }
            }
        }
    }
</style>
